<template>
  <div class="music">
    <div class="home" @click="closemusic">
      <router-link to="/">
        <img src="./../assets/images/musicplay/home.png" alt="">
      </router-link>
    </div>
    <div class="back" @click="closemusic">
      <router-link to="/">
        <img src="./../assets/images/musicplay/back.png" alt="">
      </router-link>
    </div>
    <div class="text">歌曲</div>
    <audio ref="video" class="videoarea" id="video" :src="playUrl" autoplay></audio>
    <div class="play-list">
      <ul id="playlist" class="ul-play-list">
        <li class="li-play-list" :class="{'play-list-active': item.isSelected}" :url="item.url" v-for='(item, index) in musicPlayList' :key='index' @click="playItem(item)">
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="play" @click="playFun">
      <img :src="playImg" alt="">
    </div>
    <div class="zuo" @click="zuoFun">
      <img src="./../assets/images/musicplay/zuo.png" alt="">
    </div>
    <div class="you" @click="youFun">
      <img src="./../assets/images/musicplay/you.png" alt="">
    </div>
    <div id="progressWrap" class="progressWrap" v-on:click="move">
        <div id="fill" class="fill"></div>
        <!--<div id="playProgress" class="playProgress"></div>-->
    </div>
    <!--<input type="range" min="0" max="100" value="50" id="pg" class="progressWrap"></input>-->

    <div class="yin" id="yin">
      <img src="./../assets/images/musicplay/yin.png" alt="">
    </div>
    <div id="yinliangWrap" class="yinliangWrap" @click="changevolume">
      <div id="yinliangProgressPoint" class="yinliangProgressPoint"></div>
    </div>
    <div class="xunhuan" @click="xunHuanFun">
      <img src="./../assets/images/musicplay/xuanhuan.png" alt="">
    </div>
    <div v-show="xunHuanShow" id="xunhuanmianbanID" class="xunhuanmianban">
      <ul id="mianbanID" class="mianbanID">
        <li class="mianban" :class="{'xunhuan-list-active': item.isSelected}" :url="item.url" v-for='(item, index) in xunhuanList' :key='index' @click="xunhuanItem(item)">
          {{item.name}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'musicplay',
    data () {
      return {
        flag: '',
        xunHuanShow: false,
        play: true,
        playUrl: '',
        mp3time: '',
        playIndex: 0,
        playImg: 'static/play/stop.png',
        musicPlayList: [{
          isSelected: 1,
          name: '001 D大调嬉游曲',
          url: 'static/music/001D大调嬉游曲.mp3'
        }, {
          isSelected: 0,
          name: '002 快乐的农夫',
          url: 'static/music/002快乐的农夫.mp3'
        }, {
          isSelected: 0,
          name: '003 天鹅',
          url: 'static/music/003天鹅.mp3'
        }, {
          isSelected: 0,
          name: '004 少女的祈祷',
          url: 'static/music/004少女的祈祷.mp3'
        }, {
          isSelected: 0,
          name: '005 小星星变奏曲',
          url: 'static/music/005小星星变奏曲.mp3'
        }, {
          isSelected: 0,
          name: '006 动物狂欢节 - 大鸟笼',
          url: 'static/music/006动物狂欢节 - 大鸟笼.mp3'
        }, {
          isSelected: 0,
          name: '007 动物狂欢节 - 袋鼠',
          url: 'static/music/007动物狂欢节 - 袋鼠.mp3'
        }, {
          isSelected: 0,
          name: '008 动物狂欢节-水族馆',
          url: 'static/music/008动物狂欢节-水族馆.mp3'
        }, {
          isSelected: 0,
          name: '009 土耳其进行曲',
          url: 'static/music/009土耳其进行曲.mp3'
        }, {
          isSelected: 0,
          name: '010 爱的旋律',
          url: 'static/music/010爱的旋律.mp3'
        }, {
          isSelected: 0,
          name: '011 朝阳',
          url: 'static/music/011朝阳.mp3'
        }, {
          isSelected: 0,
          name: '012 初雪',
          url: 'static/music/012初雪.mp3'
        }, {
          isSelected: 0,
          name: '013 春泉',
          url: 'static/music/013春泉.mp3'
        }, {
          isSelected: 0,
          name: '014 海神',
          url: 'static/music/014海神.mp3'
        }, {
          isSelected: 0,
          name: '015 蓝色珊瑚',
          url: 'static/music/015蓝色珊瑚.mp3'
        }, {
          isSelected: 0,
          name: '016 满天星',
          url: 'static/music/016满天星.mp3'
        }, {
          isSelected: 0,
          name: '017 魔笛',
          url: 'static/music/017魔笛.mp3'
        }, {
          isSelected: 0,
          name: '018 奶油面包',
          url: 'static/music/018奶油面包.mp3'
        }, {
          isSelected: 0,
          name: '019 亲切',
          url: 'static/music/019亲切.mp3'
        }, {
          isSelected: 0,
          name: '020 清晨',
          url: 'static/music/020清晨.mp3'
        }, {
          isSelected: 0,
          name: '021 钻石',
          url: 'static/music/021钻石.mp3'
        }, {
          isSelected: 0,
          name: '022 自然的力量',
          url: 'static/music/022自然的力量.mp3'
        }, {
          isSelected: 0,
          name: '023 紫蝴蝶',
          url: 'static/music/023紫蝴蝶.mp3'
        }, {
          isSelected: 0,
          name: '024 晚霞',
          url: 'static/music/024晚霞.mp3'
        }, {
          isSelected: 0,
          name: '025 以色列舞曲',
          url: 'static/music/025以色列舞曲.mp3'
        }, {
          isSelected: 0,
          name: '026 哆唻咪',
          url: 'static/music/026哆唻咪.mp3'
        }, {
          isSelected: 0,
          name: '027 蜗牛与黄鹂鸟',
          url: 'static/music/027蜗牛与黄鹂鸟.mp3'
        }, {
          isSelected: 0,
          name: '028 我们的生活多么幸福',
          url: 'static/music/028我们的生活多么幸福.Mp3'
        }, {
          isSelected: 0,
          name: '029 小红帽',
          url: 'static/music/029小红帽.mp3'
        }, {
          isSelected: 0,
          name: '030 小老鼠上灯台',
          url: 'static/music/030小老鼠上灯台.mp3'
        }, {
          isSelected: 0,
          name: '031 小汽车',
          url: 'static/music/031小汽车.mp3'
        }, {
          isSelected: 0,
          name: '032 小小船',
          url: 'static/music/032小小船.mp3'
        }, {
          isSelected: 0,
          name: '033 爷爷为我打月饼',
          url: 'static/music/033爷爷为我打月饼.mp3'
        }, {
          isSelected: 0,
          name: '034 找朋友',
          url: 'static/music/034找朋友.mp3'
        }, {
          isSelected: 0,
          name: '035 祝你生日快乐',
          url: 'static/music/035祝你生日快乐.mp3'
        }, {
          isSelected: 0,
          name: '036 刷牙歌',
          url: 'static/music/036刷牙歌.mp3'
        }, {
          isSelected: 0,
          name: '037 蜜蜂做工',
          url: 'static/music/037蜜蜂做工.mp3'
        }, {
          isSelected: 0,
          name: '038 妈妈的眼睛',
          url: 'static/music/038妈妈的眼睛.mp3'
        }, {
          isSelected: 0,
          name: '039 报春',
          url: 'static/music/039报春.mp3'
        }, {
          isSelected: 0,
          name: '040 两只老虎',
          url: 'static/music/040两只老虎.mp3'
        }, {
          isSelected: 0,
          name: '041 拉拉勾',
          url: 'static/music/041拉拉勾.mp3'
        }, {
          isSelected: 0,
          name: '042 黑猫警长',
          url: 'static/music/042黑猫警长.mp3'
        }, {
          isSelected: 0,
          name: '043 粉刷匠',
          url: 'static/music/043粉刷匠.mp3'
        }, {
          isSelected: 0,
          name: '044 大树桩你有几岁',
          url: 'static/music/044大树桩你有几岁.mp3'
        }, {
          isSelected: 0,
          name: '045 大树妈妈',
          url: 'static/music/045大树妈妈.mp3'
        }, {
          isSelected: 0,
          name: '046 聪明一休哥',
          url: 'static/music/046聪明一休哥.mp3'
        }, {
          isSelected: 0,
          name: '047 春天在哪里',
          url: 'static/music/047春天在哪里.MP3'
        }, {
          isSelected: 0,
          name: '048 虫儿飞',
          url: 'static/music/048虫儿飞.mp3'
        }, {
          isSelected: 0,
          name: '049 布娃娃',
          url: 'static/music/049布娃娃.mp3'
        }, {
          isSelected: 0,
          name: '050 老师再见了',
          url: 'static/music/050老师再见了.mp3'
        }],
        xunHuanMode: 0,
        xunhuanList: [{
          mode: 0,
          isSelected: 0,
          name: '单曲循环'
        }, {
          mode: 1,
          isSelected: 1,
          name: '顺序播放'
        }, {
          mode: 2,
          isSelected: 0,
          name: '随机播放'
        }, {
          mode: 3,
          isSelected: 0,
          name: '列表循环'
        }]
      }
    },
    mounted () {
      let that = this
      that.xunHuanMode = 1
      that.playUrl = that.musicPlayList[0].url
      that.mp3time = that.musicPlayList[0].duration
      that.flag = setInterval(function () {
        that.onChange()
      }, 1000)
    },
    methods: {
      playFun: function () {
        this.play = !this.play
        if (this.play === true) {
          let that = this
          this.$refs.video.play()
          this.playImg = 'static/play/stop.png'
          this.flag = setInterval(function () {
            that.onChange()
          }, 1000)
        } else {
          this.$refs.video.pause()
          this.playImg = 'static/play/play.png'
          clearInterval(this.flag)
        }
        // this.playItem(this.musicPlayList[this.playIndex])
      },
      onChange: function (e) {
        var mp3name = document.getElementById('video')
        var mp3time = mp3name.duration
        var percent = mp3name.currentTime / mp3time
        var fill = document.getElementById('fill')
        var progressWrap = document.getElementById('progressWrap')
        // var slider = document.getElementById('playProgress')
        fill.style.width = percent * (progressWrap.offsetWidth) + 'px'
        // slider.style.left = percent * (progressWrap.offsetWidth) + 'px'
        if (mp3name.currentTime === mp3time) {
          this.youFun()
        }
      },
      zuoFun: function () {
        clearInterval(this.flag)
        // console.log('zuoFun')
        // let that = this
        // this.flag = setInterval(function () {
        //   that.onChange()
        // }, 1000)
        this.play = true
        this.playImg = 'static/play/stop.png'
        if (this.playIndex === 0) {
          // 第一首
          if (this.xunHuanMode === 3 || this.xunHuanMode === 1) {
            // 列表循环, 返回第一首
            this.playItem(this.musicPlayList[this.musicPlayList.length - 1])
          } else if (this.xunHuanMode === 2) {
            // 随机播放
            this.playItem(this.musicPlayList[Math.floor(Math.random() * this.musicPlayList.length)])
          } else if (this.xunHuanMode === 0) {
            // 单曲循环
            this.playItem(this.musicPlayList[this.playIndex])
          }
        } else {
          if (this.xunHuanMode === 2) {
            // 随机播放
            this.playItem(this.musicPlayList[Math.floor(Math.random() * this.musicPlayList.length)])
          } else if (this.xunHuanMode === 0) {
            // 单曲循环
            this.playItem(this.musicPlayList[this.playIndex])
          } else {
            // 下一首
            this.playItem(this.musicPlayList[this.playIndex - 1])
          }
        }
      },
      youFun: function () {
        clearInterval(this.flag)
        // let that = this
        // this.flag = setInterval(function () {
        //   that.onChange()
        // }, 1000)
        this.play = true
        this.playImg = 'static/play/stop.png'
        if (this.musicPlayList.length === this.playIndex + 1) {
          // 结尾
          if (this.xunHuanMode === 3 || this.xunHuanMode === 1) {
            // 列表循环, 返回第一首
            this.playItem(this.musicPlayList[0])
          } else if (this.xunHuanMode === 2) {
            // 随机播放
            this.playItem(this.musicPlayList[Math.floor(Math.random() * this.musicPlayList.length)])
          } else if (this.xunHuanMode === 0) {
            // 单曲循环
            this.playItem(this.musicPlayList[this.playIndex])
          }
        } else {
          if (this.xunHuanMode === 2) {
            // 随机播放
            this.playItem(this.musicPlayList[Math.floor(Math.random() * this.musicPlayList.length)])
          } else if (this.xunHuanMode === 0) {
            // 单曲循环
            this.playItem(this.musicPlayList[this.playIndex])
          } else {
            // 下一首
            this.playItem(this.musicPlayList[this.playIndex + 1])
          }
        }
      },
      playItem: function (selectedItem) {
        clearInterval(this.flag)
        if (this.xunHuanMode === 0) {
          var mp3name = document.getElementById('video')
          mp3name.currentTime = 0
          var fill = document.getElementById('fill')
          fill.style.width = 0 + 'px'
        }
        let that = this
        this.play = false
        this.playFun()
        this.flag = setInterval(function () {
          that.onChange()
        }, 1000)
        this.playUrl = selectedItem.url
        let index = 0
        this.musicPlayList.forEach(item => {
          item.isSelected = (item.name === selectedItem.name)
          index += 1
          if (item.name === selectedItem.name) {
            this.playIndex = index - 1
          }
        })
      },
      xunhuanItem: function (selectedItem) {
        this.xunHuanMode = selectedItem.mode
        var mp3name = document.getElementById('video')
        if (this.xunHuanMode === 0) {
          mp3name.loop = 'loop'
        } else {
          mp3name.loop = ''
        }
        this.xunhuanList.forEach(item => {
          item.isSelected = (item.name === selectedItem.name)
        })
        this.xunHuanShow = false
      },
      xunHuanFun: function () {
        this.xunHuanShow = !this.xunHuanShow
      },
      move: function (e) {
        var fill = document.getElementById('fill')
        // var slider = document.getElementById('playProgress')
        var mp3name = document.getElementById('video')
        var mp3time = mp3name.duration
        if (e.offsetX > 0) {
          fill.style.width = e.offsetX + 'px'
          // slider.style.left = e.offsetX + 'px'
          var avg = 640 / mp3time
          var itemtime = e.offsetX / avg
          mp3name.currentTime = itemtime
        }
      },
      changevolume: function (e) {
        var slider = document.getElementById('yinliangProgressPoint')
        slider.style.left = e.offsetX + 'px'
        this.$refs.video.volume = e.offsetX / 77
      },
      closemusic: function () {
        clearInterval(this.flag)
      }
    }
  }
</script>

<style scoped>
  .music {
    color: #aaa;
    background: url('~@/assets/images/musicplay/bg.png');
    width: 1280px;
    height: 720px;
    user-select: none;
  }
  .music > div {
    position: absolute;
  }
  .text {
    width: 80px;
    height: 30px;
    top: 80px;
    left: 625px;
    color: rgb(242, 219, 183);
    font-size: 35px;
  }
  .home {
    width: 166px;
    height: 52px;
    top: 50px;
    left: 80px;
  }
  .back {
    width: 166px;
    height: 52px;
    top: 102px;
    left: 80px;
  }
  .play {
    top: 629px;
    left: 103px;
    width: 78px;
    height: 82px;
  }
  .progressWrap {
    position: absolute;
    width: 640px;
    height: 18px;
    top: 662px;
    left: 330px;
    background-image: url("~@/assets/images/musicplay/dahuakuai.png");
    cursor: pointer;
    overflow: hidden;
  }
  .fill{
    position: absolute;
    display: inline-block;
    width:0px;
    height:18px;
    background: #0d8cd8;
    border-radius: 8px;
  }
  .playProgress {
    position: absolute;
    display:inline-block;
    background-color: #0d8cd8;
    left: 0px;
    width: 10px;
    height: 18px;
    border-radius: 8px;
  }
  .zuo {
    top: 648px;
    left: 204px;
  }
  .you {
    top: 648px;
    left: 259px;
  }
  .yin {
    top: 646px;
    left: 990px;
    cursor: pointer;
  }
  .yinliangWrap {
    position: absolute;
    width: 77px;
    height: 11px;
    top: 663px;
    left: 1046px;
    cursor: pointer;
    background-image: url('~@/assets/images/musicplay/yinliang.png');
  }
  .yinliangProgressPoint {
    position: absolute;
    display:inline-block;
    background-color: #fff;
    width: 18px;
    height: 18px;
    left:60px;
    top: -3px;
    border-radius: 50%;
  }
  .xunhuan {
    top: 646px;
    left: 1147px;
  }
  .xunhuanmianban {
    background-image: url('~@/assets/images/musicplay/xunhuanmianban.png');
    position: absolute;
    width: 77px;
    height: 112px;
    font-size: 16px;
    color: #fff;
    top: 528px;
    left: 1129px;
    cursor: pointer;
  }
  .mianbanID {
    margin: 5px;
    padding: 0;
    list-style-type: none;
  }
  .mianban {
    margin-top: 5px;
    margin-bottom: 6px;
  }
  .play-list {
    position: absolute;
    top: 138px;
    left: 377px;
    height: 468px;
    width: 575px;
    overflow: auto;
    text-align: center;
  }
  .ul-play-list {
    margin: 0;
    padding: 0;
  }
  .li-play-list {
    cursor: pointer;
    font-size: 16pt;
    color: #321c00;
    padding-top: 10px;
    padding-bottom: 10px;
    list-style-type: none;
    border-bottom: 1px solid #3b2412;
    margin-left: 10px;
  }
  .play-list-active {
    color: #F2DBB7;
    font-size: 22pt;
  }
  .xunhuan-list-active {
    color: #321c00;
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #95673D;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #5C2F11;
  }
</style>
